import { size, IFormProps, pageSize, dateTimeFormat, dateFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select, DatePicker } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
import moment from 'moment';
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';

export interface IRefundHistoriesPros extends IFormProps {
    refund: any
}
class RefundHistories extends React.PureComponent<IRefundHistoriesPros, any>{
    constructor(props) {
        super(props);
    }

    state = {
        beginTime: '',
        endTime: '',
        status: ''
    }

    componentDidMount() {
        this.search();
    }

    search = () => {
        this.getHistories();
    }

    getHistories = (payload?) => {
        const { beginTime, endTime, status } = this.state;
        payload = Object.assign({},
            this.props.refund.historySearchs,
            this.props.form.getFieldsValue(),
            { beginTime, endTime, status },
            {...payload});
        this.props.dispatch({
            type: "refund/getRefundHistories",
            payload
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    edit = (id) => {
        this.props.history.push('/order/refund?id=' + id);
    }

    onChange = (date, dateString) => {
        //console.log(date, dateString);
        this.setState({ beginTime: dateString[0], endTime: dateString[1] });
    }

    onTypeChange = (status) => {
        this.setState({ status });
        //this.props.form.setFields({ type });
    }

    render(): JSX.Element {
        //console.log(this.props);
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const {
            histories: { totalCount, items },
            historySearchs: { beginTime, endTime, pageIndex, pageSize, status } } = this.props.refund;

        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.refund.historySearchs,
                { pageIndex, pageSize });
            this.getHistories(payload);
        }
        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Form layout="inline">
                            <Form.Item label='申请时间'>
                                <DatePicker.RangePicker onChange={this.onChange} format={dateFormat} />
                            </Form.Item>
                            <Form.Item label='处理状态'>
                                <Select style={{ width: 120 }} defaultValue='' onChange={this.onTypeChange}>
                                    <Select.Option value=''>全部</Select.Option>
                                    <Select.Option value='2'>驳回</Select.Option>
                                    <Select.Option value='3'>已审核</Select.Option>
                                    <Select.Option value='4'>处理中</Select.Option>
                                    <Select.Option value='5'>已完成</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>退款历史列表（共 {totalCount} 条）</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallRefundsVORefundVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return (pageIndex - 1) * pageSize + index + 1
                                }} />
                                <Table.Column title="申请编号" key="refundNo" dataIndex="refundNo" />
                                <Table.Column title="商品名称" key="itemName" dataIndex="itemName" />
                                <Table.Column title="价格" key="totalPrice" dataIndex="totalPrice" />
                                <Table.Column title="手机号码" key="phoneNumber" dataIndex="phoneNumber" />
                                <Table.Column title="退款金额（元）" key="amount" dataIndex="amount" />
                                <Table.Column title="退款原因" key="reason" dataIndex="reason" />
                                <Table.Column title="申请时间" key="time" render={(text, record: api.SingleUserMallRefundsVORefundVO, index) => {
                                    return moment(record.creationTime).format(dateTimeFormat)
                                }} />
                                <Table.Column title="处理时间" key="refundTime" render={(text, record: api.SingleUserMallRefundsVORefundVO, index) => {
                                    return moment(record.refundTime).format(dateTimeFormat)
                                }} />
                                <Table.Column title="状态" key="statusView" dataIndex="statusView" />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallRefundsVORefundVO, index) => {
                                    return (
                                        <div>
                                            <a className={Styles.M_RIGHT} onClick={() => this.edit(record.id)}>
                                                查看
                                            </a>
                                        </div>
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
            </Row>)
    }
}

export default connect(({ refund, loading: { models: { refund: loading } } }) => ({ refund, loading }))(Form.create()(RefundHistories));
